<template>
  <div    >
    <div style="background-color: rgb(180, 180, 180)">
      <div class="ls_maincont"></div>
      <div
        id="three"
        ref="environment"
        style="position: absolute; top: 0"
        v-show="flag" ></div>
      <div class="stage_t">
        <a href="#"></a>
        <!-- <h1>智慧燃烧数字化与可视化系统</h1> -->
        <div>
          <span  @click="dianjiflag" ></span>
          <span id="todayTimer">{{ nowTime }}</span>
        </div>
      </div>

      <div class="m" style="position: relative; top: 57px"  >
        <div class="stage_c_t">
          <div class="c react"   >
            <!--  -->
            <!-- <p>
              <span>机组功率：240.40MW</span>
              <span class="number_1"></span>
            </p>
            <p style="display: none">
              <span>入炉煤总量：3.</span>
            </p>
            <p>
              <span>氧量：3.71/4.35%</span>
              <span class="number_1"></span>
            </p>
            <p>
              <span>一次风压：2.48</span>
              <span class="number_1"></span>
            </p>
            <span>NOx浓度：454.37/434.38Nm3</span>
            <span class="number_1"></span>

            <p style="display: none">
              -
              <span>原烟气NOx：</span>
              <span class="number_1"></span>
            </p> -->
            <!--  -->
          </div>
        </div>
      </div>
      <div class="stage_c_l" style="top: 125px"   >
        <div class="t">
          <div class="wendutiao_react"></div>
          <div class="wendutiao_text">
            <span>1800</span>
            <span>1620</span>
            <span>1450</span>
            <span>1270</span>
            <span>1090</span>
            <span>910</span>
            <span>730</span>
            <span>560</span>
            <span>380</span>
            <span>204</span>
          </div>
        </div>
        <div class="d">°C</div>
      </div>
      <div class="tanchuang">
        <div
          id="tanchuangshow"
          class="stage_c_r main_2"
          style="
            width: calc((50% - 300px) * 2);
            position: absolute;
            left: 50%;
            top: 200px;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            background: none;
          "
        >
          <div class="d main0"  >
            <div class="envent_u" style="background-color: rgb(4, 44, 69)">
              <span id="namechangge0" style="color: aliceblue; border: none"
                >A层监测项</span
              >
              <span id="namechangge1" style="color: aliceblue; border: none"
                >A1</span
              >
              <span id="namechangge2" style="color: aliceblue; border: none"
                >A2</span
              >
              <span id="namechangge3" style="color: aliceblue; border: none"
                >A3</span
              >
              <span id="namechangge4" style="color: aliceblue; border: none"
                >A4</span
              >
            </div>
            <div
              class="envent_d"
              id="index_rsszhjkA"
              style="background: rgb(142, 142, 142, 0.9)"
            ></div>
          </div>
        </div>
      </div>
      <div class="stage_c_r" style="display: none" >
        <div class="t">
          <div class="react">
            <i class="l_up"></i>
            <i class="l_down"></i>
            <i class="r_up"></i>
            <i class="r_down"></i>
            <div class="title">
              <span style="font-size: 29px">横截面温度分布</span>
            </div>
          </div>
        </div>
        <div class="d" id="zbf_r_btns" style="flex: 1">
          <span class="active">A层燃烧器截面</span>
          <span class="active">B层燃烧器截面</span>
          <span class="active">C层燃烧器截面</span>
          <span class="active">D层燃烧器截面</span>
          <span class="active">E层燃烧器截面</span>
          <span class="active">F层燃烧器截面</span>
          <span class="active">G层燃烧器截面</span>
          <span class="active">燃尽风层截面</span>
          <span>火焰状态</span>
          <span>全部关闭</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { formatTime } from "../utils/date.js";
// import TWEEN from "@tweenjs/tween.js";
// console.log(TWEEN);
// 时间格式化
const nowTime = ref("");
// 存放数据的地方
// 钩子函数
onMounted(() => {
  setInterval(() => {
    nowTime.value = formatTime(new Date());
  });
  document.getElementById("three")?.appendChild(renderer.domElement);
  init();
  renderModel();
  gltfModel1();
  render();
});
// 3d动画
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; //gltf
import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";
const width = window.innerWidth,
height = window.innerHeight;
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
const loader = new GLTFLoader();
var dracoLoader = new DRACOLoader();
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
const controls = new OrbitControls(camera, renderer.domElement);
const mesh = new THREE.Mesh();
// ///////////////////////////////////////////////////////////////////////////
let  light, spotLight;
let runcaizhi = ref("");
let stopcaizhi =ref("");
let touming = ref("");
function init() {
  //光源
  const ambient = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(ambient);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 6); //光源，color:灯光颜色，intensity:光照强度
  directionalLight.position.set(400, 200, 300);
  scene.add(directionalLight);

  directionalLight.position.set(25, 150, 75);
  directionalLight.angle = Math.PI / 6;
  directionalLight.penumbra = 1;
  directionalLight.decay = 2;
  directionalLight.distance = 300;
  // spotLight.map = textures[ 'disturb.jpg' ];
  directionalLight.castShadow = false; //可以产生阴影
  directionalLight.shadow.mapSize.width = 2048;
  directionalLight.shadow.mapSize.height = 2048;
  directionalLight.shadow.camera.near = 10;
  directionalLight.shadow.camera.far = 200;
  directionalLight.shadow.focus = 1;
  scene.add(directionalLight);

  //设置相机位置
  camera.position.set(0, 0, 14);
  camera.layers.disableAll();
    camera.layers.enableAll();
    camera.layers.disable( 1);
    camera.layers.enable( 1);
  //设置相机方向
  camera.lookAt(0, 15,0);
  //辅助坐标轴
  // const axesHelper = new THREE.AxesHelper(100); //参数200标示坐标系大小，可以根据场景大小去设置
  // scene.add(axesHelper);
  scene.background = new THREE.Color(0x666666);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.antialias = true;
}

function gltfModel1() {
  const mesh = new THREE.Mesh();
  var dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("/examples/js/libs/draco/");
  loader.setDRACOLoader(dracoLoader);
  loader.load(
    "/static/baiyinghua.glb",
    function (gltf) {
      const root = gltf.scene;
      console.log(root);     
      // 锅炉主体
      const a = root.children[0].children[1];
      // 创建材质
      function createGradientMaterial() {
        // 自定义顶点着色器代码
        const vertexShader = `
            varying vec3 vPosition;
            void main() {
                vPosition = position;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }
        `;

        
        // 自定义片元着色器代码
        const fragmentShader = `
          uniform vec3 colorStart;
          uniform vec3 colorEnd;
          varying vec3 vPosition;

          void main() {
              // 计算渐变系数（从下到上）
              float factor = (vPosition.y + 1.0) / 2.0;
              factor = factor * factor; // 加速度控制
              
              // 计算颜色插值
              vec3 finalColor;
              if (factor < 0.4) {
                finalColor = mix(colorStart, colorEnd, factor * 3.0);
              } else {
                finalColor = mix(colorEnd, colorEnd, (factor - 0.4)* 3.0);
              }
              
              // 输出最终颜色
              gl_FragColor = vec4(finalColor, 0.5);
          }
      `;

        // 创建自定义材质
        return new THREE.ShaderMaterial({
          uniforms: {
            colorStart: { value: new THREE.Color(0xEBDA1E) }, 
            colorEnd: { value: new THREE.Color(0xf89b0f) },
          },
          vertexShader: vertexShader,
          fragmentShader: fragmentShader,
          transparent: true, // 开启透明
        });

      }
      a.material = createGradientMaterial()
      // 锅炉烟道
      const b = root.children[0].children[0]
      function createGradientMaterial2() {
        // 自定义顶点着色器代码
        const vertexShader = `
            varying vec3 vPosition;

            void main() {
              vPosition = position;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }
        `;

        // 自定义片元着色器代码
        const fragmentShader = `
            uniform vec3 colorStart;
            uniform vec3 colorEnd;
            varying vec3 vPosition;

            void main() {
                // 计算渐变系数（从上到下，先快后慢）
                float factor = 1.0 - (vPosition.y - 1.8) / 10.0;
                factor = 1.0 - factor * factor * factor; // 加速度控制
                
                // 计算颜色插值
                vec3 finalColor;
                finalColor = mix(colorStart, colorEnd, factor);
                
                // 输出最终颜色
                gl_FragColor = vec4(finalColor, 0.5);
            }  
        `;

        return new THREE.ShaderMaterial({
          uniforms: {
            colorStart: { value: new THREE.Color(0xEBDA1E) }, 
            colorEnd: { value: new THREE.Color(0xf89b0f) },
          },
          transparent: true, // 开启透明
          vertexShader: vertexShader,
          fragmentShader: fragmentShader,
        });
      }
      b.material = createGradientMaterial2();
        root.position.y = -4;
      root.position.x = -2;
      scene.add(gltf.scene);
    },
    function (xhr) {      
      const percent = Math.floor((xhr.loaded / xhr.total) * 200); // 计算加载进度百分比
    },
  );
}

function renderModel() {
  //渲染
  renderer.setSize(width, height); //设置渲染区尺寸
  renderer.render(scene, camera); //执行渲染操作、指定场景、相机作为参数
  // renderer.setClearColor(0x00ff00); // 设置背景颜色为绿色
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  // 设置曝光度
  renderer.toneMappingExposure = 1.5; // 适当调整曝光度
  controls.minPolarAngle = Math.PI / 4; // 最小极角为 45 度
  controls.maxPolarAngle = Math.PI / 2; // 最大极角为 90 度
}

function render() {
  renderer.render(scene, camera);
  controls.update();
  requestAnimationFrame(render);
}

// 画布跟随窗口变化
window.onresize = function () {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
};

// 交互事件
addEventListener("dblclick", onMouseDblclick, false);
function onMouseDblclick(event) {
  let intersects = getIntersects(event);
  if (intersects.length !== 0 && intersects[0].object instanceof THREE.Mesh) {
    const selectedObject = intersects[0].object;
    let selectedObjects = [];
    selectedObjects.push(selectedObject);
    console.log(selectedObjects);
    // outlinePass.selectedObjects = selectedObjects;
  }
}
//获取与射线相交的对象数组
function getIntersects(event) {
  let rayCaster = new THREE.Raycaster();
  let mouse = new THREE.Vector2();
  //通过鼠标点击位置，计算出raycaster所需点的位置，以屏幕为中心点，范围-1到1
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; //这里为什么是-号，没有就无法点中
  //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
  rayCaster.setFromCamera(mouse, camera);
  return rayCaster.intersectObjects(scene.children);
}

// 让三维的动画实现显示和隐藏
// 显示与隐藏的开关
let flag=ref(false);
let dianjiflag=()=>{
  flag.value=!flag.value;
}
</script>



<style  scoped>
:root {
    --brand-color: #051b30;
    --border-color: #00c0ff;
    --bg-color: #040a18;
    --title-bg-color: #041c30;
    --title-second-bg-color: #052740;
    --title-color: #00f1ff;
    --label-color: #9bdef0;
}


/*四个角框*/
.border_corner {
    z-index: 2500;
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid var(--border-color);
}

.border_corner_left_top {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}

.border_corner_right_top {
    top: -1px;
    right: -1px;
    border-left: none;
    border-bottom: none;
}

.border_corner_left_bottom {
    bottom: -1px;
    left: -1px;
    border-right: none;
    border-top: none;
}

.border_corner_right_bottom {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

.w-full {
    width: 100%;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.h-full {
    height: 100%;
}

.loading {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #00c0ff;
    top: 0;
    left: 0;
}
</style>